<template>
  <div class="main">
    <p class="main_text">员工管理</p>
    <!-- #####################################头部##################################### -->
    <div class="main_nav p20 mb20">
      <el-form :model="searchData" class="df fww">
        <el-form-item v-if="cmopany == 0" label="公司名称：" class="mr20" style="width: 20%;">
          <el-select v-model="searchData.companyNode" placeholder="公司名称" clearable>
            <el-option v-for="item in companyList" :key="item.id" :label="item.companyName" :value="item.node" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称：" class="mr20" style="width: 20%;">
          <el-tree-select v-model="searchData.node" :data="sectionData" check-strictly :render-after-expand="false"
            clearable />
        </el-form-item>
        <el-form-item label="员工状态：" class="mr20" style="width: 20%;">
          <el-select v-model="searchData.state" placeholder="状态" clearable>
            <el-option label="在职" value="A" />
            <el-option label="离职" value="D" />
            <el-option label="实习" value="P" />
            <el-option label="未入职" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工：" class="mr20" style="width: 20%;">
          <el-input v-model="searchData.name" placeholder="员工" clearable />
        </el-form-item>
        <el-form-item label="员工编号：" class="mr20" style="width: 20%;">
          <el-input v-model="searchData.employeeNo" placeholder="员工编号" clearable />
        </el-form-item>
        <el-form-item label="手机号：" class="mr20" style="width: 20%;">
          <el-input v-model="searchData.phone" placeholder="请输入完整手机号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDataBtn">查询</el-button>
          <el-button type="primary" plain @click="recs">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- #####################################底部##################################### -->
    <div class="cyr-flex">
      <div class="mb20">
        <el-button type="primary" @click="centerDialogVisible = true" v-if="roleList.write">添加员工</el-button>
      </div>
      <!-- 表格 -->
      <div class="cyr-flex-box">
        <el-table @selection-change="handleSelectionChange" :data="tableData"
          :header-cell-style="{ background: '#f0f6fe' }" :show-overflow-tooltip="true" v-adaptive border>
          <el-table-column type="selection" width="50" />
          <!-- <el-table-column label="ID" prop="id" /> -->
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="员工编号" prop="employee_no" />
          <el-table-column label="部门" prop="部门名称" />
          <el-table-column label="电话" prop="mobile" />
          <!-- <el-table-column label="岗位" prop="员工岗位" /> -->
          <el-table-column label="创建时间" prop="create_time" />
          <el-table-column label="状态" prop="state">
            <template #default="props">
              <!-- state{"A":"在职","D":"离职","P":"实习","N":"未入职"} -->
              <el-tag v-if="props.row.state == 'A'" type="success">在职</el-tag>
              <el-tag v-else-if="props.row.state == 'D'" type="info">离职</el-tag>
              <el-tag v-else-if="props.row.state == 'P'" type="warning">实习</el-tag>
              <el-tag v-else type="danger">未入职</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template #default="props">
              <el-button size="small" link type="primary" @click="change(props.row)"
                v-if="roleList.read">查看修改</el-button>
              <el-button size="small" link type="primary" @click="allotPositon(props.row)"
                v-if="roleList.write">分配岗位</el-button>
              <!-- <el-button size="small" link type="danger" @click="del(props.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          @change="handleCurrentChange" />
      </div>
      <!-- 蒙层-----添加员工 -->
      <el-dialog v-model="centerDialogVisible" title="添加员工" align-center width="40%" @close="clearPosition">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff;" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff;">添加员工</p>
          </div>
        </template>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="9.375rem" class="df fdc aic"
          label-position="left">
          <el-form-item label="姓名：" prop="name" style="width: 70%;">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="电话：" prop="phone" style="width: 70%;">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="是否登录系统：" prop="Limits" style="width: 70%;">
            <el-radio-group v-model="ruleForm.Limits">
              <el-radio :label="false" size="small"><span style="font-size: 0.875rem;">是</span></el-radio>
              <el-radio :label="true" size="small"><span style="font-size: 0.875rem;">否</span></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属部门：" prop="section" style="width: 70%;">
            <el-tree-select v-model="ruleForm.section" :data="sectionData" check-strictly @change="blurSection"
              :render-after-expand="false" />
          </el-form-item>
          <el-form-item label="岗位：" prop="station" style="width: 70%;" class="disSelect_r">
            <el-select-v2 v-model="ruleForm.station" filterable :options="station_options1" placeholder="请选择岗位" multiple
              class="nenSelect" collapse-tags collapse-tags-tooltip :max-collapse-tags="1" @focus="changeStation" />
            <el-select-v2 v-model="ruleForm.station" prop="station" filterable :options="station_options"
              placeholder="请选择岗位" multiple disabled class="disSelect" collapse-tags collapse-tags-tooltip
              :max-collapse-tags="3" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button size="small" type="primary" @click="submitForm(ruleFormRef)">
              添加
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 蒙层-----给员工分配岗位 -->
      <el-dialog v-model="allotPostionDialogVisible" align-center width="40%" @close="clearPosition">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff;" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff;">分配岗位</p>
          </div>
        </template>
        <el-form ref="ruleFormRef" :model="allotPosiForm" :rules="rules" label-width="7.5rem" status-icon
          label-position="left" class="df fdc aic">
          <el-form-item label="姓名：" style="width: 60%;">
            <el-text>{{ allotPosiForm.name }}</el-text>
          </el-form-item>
          <el-form-item label="账号：" style="width: 60%;">
            <el-text>{{ allotPosiForm.mobile }}</el-text>
          </el-form-item>
          <el-form-item label="部门：" style="width: 60%;">
            <el-tree-select v-model="allotPosiForm.section" :data="sectionData" check-strictly @change="blurSection"
              :render-after-expand="false" />
          </el-form-item>
          <el-form-item label="岗位：" prop="station" style="width: 60%;" class="disSelect_r">
            <el-select-v2 v-model="allotPosiForm.station" filterable :options="station_options1" placeholder="请选择岗位"
              multiple @focus="changeStation1" class="nenSelect" collapse-tags collapse-tags-tooltip
              :max-collapse-tags="1" />
            <el-select-v2 v-model="allotPosiForm.station" filterable :options="station_options" placeholder="请选择岗位"
              multiple disabled class="disSelect" collapse-tags collapse-tags-tooltip :max-collapse-tags="3" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="allotPostionDialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="allotPosiFormBtn">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 右侧弹出层-------修改员工信息 -->
      <el-drawer v-model="drawer" title="I am the title" :with-header="false" @close="closedrawer">
        <!-- 顶部 -->
        <div class="df aic jcsb">
          <div class="df aic">
            <img v-if="formEmployee.photo == null" class="mask_img" src="../../../assets/images/avtor.png" alt="" />
            <img v-else class="mask_img" :src="formEmployee.photo" alt="" />
            <div>
              <p class="mask_name">{{ formEmployee.name }}</p>
              <span class="mask_id">{{ formEmployee.employee_no }}</span>
            </div>
          </div>
          <!-- <div class="mask_icon df aic jcc">
                        <el-icon color="#fff" size="1.25rem">
                            <Delete />
                        </el-icon>
                    </div> -->
        </div>
        <!-- 主要内容 -->
        <!-- <el-tabs v-model="activeName" class="demo-tabs mt20" @tab-click="handleClick"> -->
        <!-- <el-tab-pane label="员工信息" name="first"> -->
        <el-form :model="formEmployee" label-width="8.75rem" labe-position="left" style="padding-top: 2.5rem;">
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715333108071" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="42262" width="14" height="14">
                  <path
                    d="M843.875 135.125h-90V90.125c0-11.25-16.875-28.125-33.75-28.125s-28.125 11.25-28.125 28.125v39.375H360.125V90.125c0-11.25-11.25-28.125-28.125-28.125s-28.125 16.875-28.125 28.125v39.375H180.125C129.5 135.125 90.125 174.5 90.125 219.5v652.5c0 50.625 39.375 90 90 90h663.75c50.625 0 90-39.375 90-90V219.5c0-45-39.375-84.375-90-84.375z m28.125 736.875c0 16.875-11.25 28.125-28.125 28.125H180.125c-16.875 0-28.125-11.25-28.125-28.125V219.5c0-16.875 11.25-28.125 28.125-28.125h118.125v5.625c5.625 16.875 16.875 33.75 33.75 33.75s28.125-11.25 28.125-28.125v-11.25h331.875v5.625c0 16.875 11.25 28.125 28.125 28.125s28.125-11.25 28.125-28.125v-5.625h90c16.875 0 28.125 11.25 28.125 28.125v652.5z"
                    p-id="42263" fill="#9e9e9e"></path>
                  <path
                    d="M753.875 337.625H270.125c-16.875 0-28.125 11.25-28.125 28.125s11.25 33.75 28.125 33.75h483.75c16.875 0 28.125-11.25 28.125-28.125s-11.25-33.75-28.125-33.75zM753.875 517.625H270.125c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125h483.75c16.875 0 28.125-11.25 28.125-28.125s-11.25-28.125-28.125-28.125zM512 697.625H270.125c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125H512c16.875 0 28.125-11.25 28.125-28.125s-11.25-28.125-28.125-28.125z"
                    p-id="42264" fill="#9e9e9e"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">姓名：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.name }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410574538" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3631" width="14" height="14">
                  <path
                    d="M320 554.666667a234.666667 234.666667 0 1 1 0-469.333334 234.666667 234.666667 0 0 1 0 469.333334z m0-42.666667a192 192 0 1 0 0-384 192 192 0 0 0 0 384zM704 938.666667a234.666667 234.666667 0 1 1 0-469.333334 234.666667 234.666667 0 0 1 0 469.333334z m0-42.666667a192 192 0 1 0 0-384 192 192 0 0 0 0 384z"
                    fill="#9e9e9e" p-id="3632"></path>
                  <path d="M682.666667 170.666667h42.666666v341.333333h-42.666666z" fill="#9e9e9e" p-id="3633"></path>
                  <path
                    d="M597.333333 256h213.333334v42.666667h-213.333334zM298.666667 512h42.666666v341.333333H298.666667z"
                    fill="#9e9e9e" p-id="3634"></path>
                  <path
                    d="M318.933333 823.893333l75.434667-75.392 30.165333 30.165334-105.6 105.6L213.333333 778.666667l30.165334-30.165334z"
                    fill="#9e9e9e" p-id="3635"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">性别：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.gender }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410627313" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4689" width="14" height="14">
                  <path
                    d="M341.333333 170.666667h554.666667v85.333333H341.333333V170.666667zM213.333333 128v128h42.666667v42.666667H128V256h42.666667V170.666667H128V128h85.333333zM128 597.333333v-106.666666h85.333333V469.333333H128v-42.666666h128v106.666666H170.666667v21.333334h85.333333v42.666666H128z m85.333333 234.666667H128v-42.666667h85.333333V768H128v-42.666667h128v170.666667H128v-42.666667h85.333333v-21.333333zM341.333333 469.333333h554.666667v85.333334H341.333333v-85.333334z m0 298.666667h554.666667v85.333333H341.333333v-85.333333z"
                    p-id="4690" fill="#9e9e9e"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">员工编号：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.employee_no }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410685466" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="6348" width="14" height="14">
                  <path
                    d="M924.415656 396.20319H65.963038v129.962558a33.023972 33.023972 0 0 1-65.962611 0V197.974022a98.986584 98.986584 0 0 1 98.986584-98.986584h66.133278v66.047944H98.987011a33.023972 33.023972 0 0 0-33.023973 32.93864V330.240578h858.452618V198.059355a33.023972 33.023972 0 0 0-33.109305-32.938639h-65.962612V98.987438h65.962612c54.698621 0 99.071917 44.373296 99.071917 98.986584v726.356728c0 54.698621-44.373296 99.071917-98.986584 99.071917H98.987011A98.986584 98.986584 0 0 1 0.000427 924.501416V690.090945a33.023972 33.023972 0 1 1 66.047945 0v234.239805c0 18.261318 14.762654 33.023972 33.023972 33.023972h792.31934a33.023972 33.023972 0 0 0 33.023972-33.023972v-528.212893zM627.285237 98.987438v66.047944H363.178791V98.987438H627.199904zM264.106873 528.213746h66.047945a33.023972 33.023972 0 1 1 0 65.962612h-66.047945a33.023972 33.023972 0 1 1 0-66.047945z m396.202337 0h66.047945a33.023972 33.023972 0 1 1 0 65.962612h-66.047945a33.023972 33.023972 0 1 1 0-66.047945z m-198.058502 0h65.962612a33.023972 33.023972 0 1 1 0 65.962612h-65.962612a33.023972 33.023972 0 1 1 0-66.047945zM264.106873 726.186915h66.047945a33.023972 33.023972 0 1 1 0 66.133278h-66.047945a33.023972 33.023972 0 1 1 0-66.047945z m396.202337 0h66.047945a33.023972 33.023972 0 1 1 0 66.133278h-66.047945a33.023972 33.023972 0 1 1 0-66.047945z m-198.058502 0h65.962612a33.023972 33.023972 0 1 1 0 66.133278h-65.962612a33.023972 33.023972 0 1 1 0-66.047945zM264.106873 0.000853a33.023972 33.023972 0 0 1 33.023973 33.023973v198.058501a33.023972 33.023972 0 1 1-66.047945 0V33.024826c0-18.261318 14.847988-33.023972 33.023972-33.023973z m462.250282 0a33.023972 33.023972 0 0 1 33.023972 33.023973v198.058501a33.023972 33.023972 0 1 1-66.047945 0V33.024826c0-18.261318 14.762654-33.023972 33.023973-33.023973z"
                    fill="#9e9e9e" p-id="6349"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">创建时间：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.create_time }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410722831" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="7419" width="14" height="14">
                  <path
                    d="M806 911h-76.6c-1.6 0-3.2-0.2-4.8-0.6-51.8-12.1-102.5-29.2-150.9-51.1-181.6-82.2-326.9-227.5-409-409-21.9-48.4-39.1-99.1-51.1-150.9-0.4-1.6-0.6-3.2-0.6-4.8V218c0-57.9 47.1-105 105-105h84c57.9 0 105 47.1 105 105v147c0 35.4-17.4 67.3-45.8 86.5 53 85.8 125.4 158.2 211.2 211.2 19.2-28.4 51.1-45.8 86.5-45.8h147c57.9 0 105 47.1 105 105v84c0.1 58-47 105.1-104.9 105.1z m-74.1-42H806c34.7 0 63-28.3 63-63v-84c0-34.7-28.3-63-63-63H659c-26.2 0-49.2 15.9-58.7 40.6-2.2 5.7-6.8 10.2-12.6 12.3-5.8 2.1-12.2 1.5-17.5-1.6-106.8-61-195.6-149.8-256.7-256.6-3-5.3-3.6-11.7-1.5-17.5 2.1-5.8 6.5-10.4 12.3-12.6C349 414.2 365 391.2 365 365V218c0-34.7-28.3-63-63-63h-84c-34.7 0-63 28.3-63 63v74.1c11.4 48.3 27.5 95.6 48 140.8C281 605.2 418.8 743 591.1 821c45.1 20.4 92.5 36.6 140.8 48z"
                    p-id="7420" fill="#9e9e9e"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">联系电话：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.mobile }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410765480" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="8548" width="14" height="14">
                  <path
                    d="M991.9 953.6H960V593.4c0-19.2-9.7-44.8-32.1-54.4L640 350.5V55.8l-3.2-6.4c-12.8-32-41.5-48-76.8-41.6L108.9 142.2c-25.7 9.6-44.8 35.2-44.8 64v742.3c0 1.8 0.1 3.5 0.2 5.2H32.1c-19.2 0-31.9 16-32.1 32.1 0 19.2 12.9 31.9 32.1 31.9H992c19.3 0 32.1-12.8 32.1-31.9-0.1-19.4-13-32.2-32.2-32.2z m-96-363.5v358.4H640V423.7l255.9 166.4zM128.1 206.2L576 71.8v876.6H128.1V206.2z"
                    fill="#9e9e9e" p-id="8549"></path>
                  <path
                    d="M448 305.3H256c-19.2 0-31.9 16.1-32.1 32.1 0 19.3 12.9 32.1 32.1 32.1h192c19.3 0 32.1-12.9 32.1-32.1 0-19.4-12.9-32.1-32.1-32.1z m0 192H256c-19.3 0-32.1 12.8-32.1 31.9 0 19.3 12.9 32.1 32.1 32.1h192c19.3 0 32.1-12.8 32.1-32.1 0-19.1-12.9-31.9-32.1-31.9z m0 191.9H256c-19.3 0-32.1 12.9-32.1 32.1v0.2c0 19.3 12.9 32.1 32.1 32.1h192c19.3 0 32.1-12.9 32.1-32.1v-0.2c0-19.4-12.9-32.1-32.1-32.1z m288 64.2h64c19.3 0 32.1-12.9 32.1-32.1 0-19.3-12.9-32.1-32.1-32.1h-64c-19.2 0-32.1 16-32.1 32.1 0.1 19.3 12.9 32.1 32.1 32.1z"
                    fill="#9e9e9e" p-id="8550"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">所属公司：</p>
              </div>
            </template>
            <el-text>{{ formEmployee.company_name }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410812639" class="icon" viewBox="0 0 1092 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="9577" width="14" height="14">
                  <path
                    d="M1058.133333 614.4H1024V443.733333A102.4 102.4 0 0 0 921.6 341.333333h-341.333333V273.066667H750.933333a68.266667 68.266667 0 0 0 68.266667-68.266667V68.266667a68.266667 68.266667 0 0 0-68.266667-68.266667H341.333333a68.266667 68.266667 0 0 0-68.266666 68.266667v136.533333a68.266667 68.266667 0 0 0 68.266666 68.266667h170.666667v68.266666h-341.333333A102.4 102.4 0 0 0 68.266667 443.733333V614.4H34.133333a34.133333 34.133333 0 0 0-34.133333 34.133333v341.333334a34.133333 34.133333 0 0 0 34.133333 34.133333h136.533334a34.133333 34.133333 0 0 0 34.133333-34.133333v-341.333334a34.133333 34.133333 0 0 0-34.133333-34.133333H136.533333V443.733333a34.133333 34.133333 0 0 1 34.133334-34.133333h341.333333v204.8H477.866667a34.133333 34.133333 0 0 0-34.133334 34.133333v341.333334a34.133333 34.133333 0 0 0 34.133334 34.133333h136.533333a34.133333 34.133333 0 0 0 34.133333-34.133333v-341.333334A34.133333 34.133333 0 0 0 614.4 614.4h-34.133333V409.6h341.333333a34.133333 34.133333 0 0 1 34.133333 34.133333V614.4h-34.133333a34.133333 34.133333 0 0 0-34.133333 34.133333v341.333334a34.133333 34.133333 0 0 0 34.133333 34.133333h136.533333a34.133333 34.133333 0 0 0 34.133334-34.133333v-341.333334a34.133333 34.133333 0 0 0-34.133334-34.133333zM341.333333 204.8V68.266667h409.6v136.533333H341.333333zM136.533333 955.733333H68.266667v-273.066666h68.266666z m443.733334 0h-68.266667v-273.066666h68.266667z m443.733333 0h-68.266667v-273.066666h68.266667z"
                    p-id="9578" fill="#9e9e9e"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">所属部门：</p>
              </div>
            </template>
            <!-- <el-text>{{ formEmployee.部门名称 }}</el-text> -->
            <el-tree-select :disabled="flag" v-model="formEmployee.node" :data="sectionData" check-strictly
              :render-after-expand="false" @blur="clearPositon" @change="blurSection1" />
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410852816" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="10670" width="14" height="14">
                  <path
                    d="M849.846857 0.073143H174.153143A139.629714 139.629714 0 0 0 34.742857 139.483429v73.654857a38.4 38.4 0 1 0 76.8 0V139.483429a62.683429 62.683429 0 0 1 62.610286-62.317715h675.693714a62.683429 62.683429 0 0 1 62.610286 62.610286v744.813714a62.683429 62.683429 0 0 1-62.610286 62.610286H174.153143a62.756571 62.756571 0 0 1-62.610286-62.610286V219.428571a37.888 37.888 0 0 0-33.426286-37.376H68.242286A37.961143 37.961143 0 0 0 34.816 219.428571v665.161143A139.483429 139.483429 0 0 0 174.153143 1024h675.693714a139.629714 139.629714 0 0 0 139.410286-139.410286V139.483429A139.629714 139.629714 0 0 0 849.846857 0.073143z m-512 670.061714L434.468571 388.388571l-45.787428-124.342857a38.4 38.4 0 0 1 35.986286-51.638857h195.657142a38.326857 38.326857 0 0 1 35.986286 51.638857l-45.787428 124.342857 96.621714 281.746286a38.4 38.4 0 0 1-15.213714 44.544l-153.526858 101.229714a38.473143 38.473143 0 0 1-43.227428-0.731428l-143.213714-101.668572a38.4 38.4 0 0 1-14.116572-43.885714z m141.970286-380.342857l21.942857 59.977143h41.179429l21.942857-59.977143z m-59.977143 378.368l98.230857 69.339429 106.861714-70.363429-82.505142-240.566857h-39.789715l-82.870857 241.371428z"
                    p-id="10671" fill="#9e9e9e"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">所属岗位：</p>
              </div>
            </template>
            <div v-if="flag == true" class="df">
              <div v-for="item in formEmployee.station_name" :key="item">
                <el-tag class="mr10">{{ item }}</el-tag>
              </div>
            </div>
            <el-select-v2 v-else v-model="formEmployee.sysStations" filterable :options="station_options1"
              placeholder="请选择岗位" multiple @focus="changeStation1" class="nenSelect" collapse-tags collapse-tags-tooltip
              :max-collapse-tags="1" />
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="df aic">
                <svg t="1715410915841" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1481" width="14" height="14">
                  <path
                    d="M210.84463 162.334118a337.016471 337.016471 0 0 1 240.941177-102.098824 342.136471 342.136471 0 0 1 301.17647 184.922353l-101.195294-24.395294a30.208 30.208 0 1 0-14.155294 58.729412l147.576471 35.538823a60.235294 60.235294 0 0 0 13.854117 1.807059 60.235294 60.235294 0 0 0 57.524706-45.778823l35.538824-147.576471a30.208 30.208 0 0 0-58.729412-14.155294l-25.6 110.531765A402.070588 402.070588 0 0 0 451.785807 0a396.950588 396.950588 0 0 0-284.009412 120.470588A30.117647 30.117647 0 1 0 210.84463 162.334118z"
                    fill="#9e9e9e" p-id="1482"></path>
                  <path
                    d="M882.46816 636.385882a150.588235 150.588235 0 1 0-199.077647 0 240.941176 240.941176 0 0 0-34.635294 19.275294 399.962353 399.962353 0 0 0-122.277647-65.054117 195.764706 195.764706 0 1 0-240.941177 0A421.647059 421.647059 0 0 0 0.021101 993.882353a30.117647 30.117647 0 0 0 60.235294 0 354.484706 354.484706 0 0 1 346.352941-361.411765 354.484706 354.484706 0 0 1 346.352941 361.411765 30.117647 30.117647 0 0 0 60.235295 0 428.272941 428.272941 0 0 0-117.157647-295.755294A180.705882 180.705882 0 0 1 963.785807 855.341176a30.117647 30.117647 0 0 0 60.235294 0 240.941176 240.941176 0 0 0-141.552941-218.955294zM271.079925 436.404706a135.529412 135.529412 0 1 1 135.529411 135.830588A135.529412 135.529412 0 0 1 271.079925 436.404706z m421.647058 87.642353a90.352941 90.352941 0 1 1 90.352942 90.352941 90.352941 90.352941 0 0 1-90.352942-90.352941z"
                    fill="#9e9e9e" p-id="1483"></path>
                </svg>&nbsp;
                <p style="color: #9e9e9e">状态：</p>
              </div>
            </template>
            <el-select v-model="formEmployee.state" placeholder="某某某" style="width: 100%;" :suffix-icon="EditPen"
              :disabled="flag">
              <el-option label="在职" value="A" />
              <el-option label="离职" value="D" />
              <el-option label="实习" value="P" />
              <el-option label="未入职" value="N" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="editFlag" v-if="roleList.write">修改</el-button>
            <el-button type="primary" :disabled="flag" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
        <!-- </el-tab-pane>
                <el-tab-pane label="岗位信息" name="second">
                    <el-form :model="formEmployee" label-width="8.75rem">
                        <el-form-item label="分配岗位：">
                            <el-icon class="icon_i" color="#3D3D3D">
                                <Operation />
                            </el-icon>
                            <el-input v-model="formEmployee.name" placeholder="岗位名称" style="width: 100%"
                                :suffix-icon="EditPen" />
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData1" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column prop="jobName" label="岗位名称" align="center" />
                        <el-table-column prop="role" label="角色" align="center" />
                        <el-table-column label="操作" align="center">
                            <template #default="scoped">
                                <el-button type="primary" link>查看权限</el-button>
                                <el-button type="danger" link>解绑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="df aic mt20 mb20">
                        <div class="blue_b"></div>
                        <p>岗位角色权限</p>
                    </div>
                    <el-table :data="tableDataTree" style="width: 100%; margin-bottom: 1.25rem" row-key="id" border
                        :header-cell-style="{ background: '#fafafa' }" default-expand-all>
                        <el-table-column prop="category" label="权限类目" />
                        <el-table-column label="权限分配">
                            <template #default="scoped">
                                <el-text>可编辑&emsp;</el-text>
                                <el-text>可查看</el-text>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                </el-tabs> -->
      </el-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { Edit } from "@element-plus/icons-vue";
import { formatTime } from "../../../filters/index";
import {
  ChromeFilled,
  UserFilled,
  Memo,
  Document,
  Aim,
  HelpFilled,
  EditPen,
} from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
import {
  Requestemployeesave,
  RequestEmployeeDel,
  RequestemployeeUpdate,
  RequestemployeeSaveEmployeeWithoutAccount,
  RequesTemployeeEmployeeStationDispatch,
  RequestemployeeId,
  RequestNodeGetDeptTree,
  RequestemployeeGetlistlimit,
  RequestNodeList,
  RequestSysStationGetStationOfNode,
  RequestCompanyList,
  RequestEmployeeGetFunctionAuthorize,
} from "@/api/path/index.js";

import { ref } from "vue";
/*------------------------------------- 按钮权限 -------------------------------------*/
import useAuthorize from "@/hooks/authorize";
let roleList = useAuthorize()
// import { useRouter } from "vue-router";
// const authorizeFlag = ref<any>();
// const btnAuthority = () => {
//   // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//   RequestEmployeeGetFunctionAuthorize(
//     useRouter().currentRoute.value.meta.title
//   ).then((res: any) => {
//     // console.log(res.resultObj);
//     if (res.resultObj == "W") {
//       authorizeFlag.value = false;
//     } else {
//       authorizeFlag.value = true;
//     }
//   });
// };
// btnAuthority();
/*------------------------------------- 按钮权限 -------------------------------------*/
interface User {
  date: string;
  name: string;
  address: string;
}
const flag = ref<boolean>(true);
const cmopany = JSON.parse(localStorage.getItem("roleInfo")!).company;

/* 表格 */
const centerDialogVisible = ref(false);
const allotPostionDialogVisible = ref(false);
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const tableData = ref<any>();
/* 递归 */
let recursionSectionArr = (arr: any) => {
  arr.forEach((item: any) => {
    item.value = item.id;
    item.label = item.name;
    if (item.type == "COMPANY") {
      item.company = item.name;
      if (item.children != null) {
        recursionSectionArr(item.children);
      } else {
        return item;
      }
    } else {
      item.sectionName = item.name;
      if (item.children != null) {
        recursionSectionArr(item.children);
      } else {
        return item;
      }
    }
  });
};
/* 获取部门树 */
const sectionData = ref<any>([]);
RequestNodeGetDeptTree(
  JSON.parse(localStorage.getItem("roleInfo")!).company
).then((res: any) => {
  recursionSectionArr(res.resultObj);
  sectionData.value = res.resultObj;
});
/* ****************************************************************** 查询 *******************************************************************/
const searchData = ref<any>({
  phone: "",
  name: "",
  node: "",
  companyNode: "",
  state: '',
  employeeNo: "",
});
const searchDataBtn = () => {
  getData();
};
const recs = () => {
  (searchData.value.phone = ""),
    (searchData.value.name = ""),
    (searchData.value.node = ""),
    (searchData.value.state = ""),
    (searchData.value.companyNode = ""),
    (searchData.value.employeeNo = ""),
    currentPage.value = 1;
  getData();
};
/* ****************************************************************** 获取部门列表 *******************************************************************/
const positionList = ref<any>([]);
const addPositionDiag = () => {
  RequestNodeList().then((res: any) => {
    positionList.value = res.resultObj;
  });
};
addPositionDiag();
/* ********************************************************************** 获取公司列表 ***********************************************************************/
const companyList = ref<any>([]);
const getCompanyList = () => {
  if (JSON.parse(localStorage.getItem("roleInfo")!).company == 0) {
    RequestCompanyList().then((res: any) => {
      console.log(res.resultObj);
      companyList.value = res.resultObj;
    });
  }
};
getCompanyList();
/* ****************************************************************** 获取岗位列表 *******************************************************************/
const closedrawer = () => {
  flag.value = true
}
const editFlag = () => {
  flag.value = false
  getPostionList(formEmployee.value.node)
}
const blurSection = (event: any) => {
  getPostionList(event);
};
const changeStation = () => {
  if (ruleForm.value.section == "") {
    ElMessage.error("请先选择部门");
  }
};
const blurSection1 = (event: any) => {
  getPostionList(event);
};
const changeStation1 = () => {
  if (allotPosiForm.value.section == "") {
    ElMessage.error("请先选择部门");
  }
};
const getPostionList = (id: any) => {
  RequestSysStationGetStationOfNode(id).then((res: any) => {
    console.log(res.resultObj);
    res.resultObj.forEach((item: any) => {
      options.value.push({
        value: item.id,
        label: item.name,
      });
      station_options.value.push({
        value: item.id,
        label: item.name,
      });
    });
    station_options1.value = JSON.parse(
      JSON.stringify(res.resultObj)
        .replace(/id/g, "value")
        .replace(/name/g, "label")
    );
  });
};
const options = ref<any>([]);
const station_options = ref<any>([]);
const station_options1 = ref<any>([]);
const clearPosition = () => {
  options.value = [];
  station_options.value = [];
  allotPosiForm.value.section = "";
  ruleForm.value.section = "";
  ruleForm.value.name = "";
  ruleForm.value.phone = "";
  ruleForm.value.station = "";
};
/* 蒙城添加员工 */
const ruleFormRef = ref<any>();
const ruleForm = ref<any>({
  account: "",
  name: "",
  section: "",
  region: "",
  password: "",
  Limits: false,
  node: 0,
  station: [],
  status: true,
  phone: "",
});
const total = ref<any>(10);
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  getData();
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  getData();
};
/* 获取员工列表 */
const getData = async () => {
  let res = await RequestemployeeGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    phone: searchData.value.phone,
    name: searchData.value.name,
    state: searchData.value.state,
    node: searchData.value.node,
    company: searchData.value.companyNode,
    employeeNo: searchData.value.employeeNo,
  });
  res.resultObj.data.forEach((item: any) => {
    item.create_time = formatTime(item.create_time);
  });
  tableData.value = res.resultObj.data;
  total.value = res.resultObj.total;
};
getData();
/* 删除单个员工 */
const del = async (id: any) => {
  let res = await RequestEmployeeDel(id);
  ElMessage.success(res.msg);
  getData();
  console.log(res);
};
/* 表单验证 */
const rules = ref<any>({
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    // { min: 3, max: 5, message: '请输入3到5位数字', trigger: 'blur' },
  ],
  password: [
    { required: true, message: "请输入初始密码", trigger: "blur" },
    // { min: 3, message: '至少6位数字或字母', trigger: 'blur' },
  ],
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    // { min: 2, max: 5, message: '确保名字是否正确', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  section: [
    {
      required: true,
      message: "请选择部门",
      trigger: "change",
    },
  ],
  // station: [
  //     {
  //         required: true,
  //         message: '请选择岗位',
  //         trigger: 'change',
  //     },
  // ],
  region: [
    {
      required: true,
      message: "请选择部门",
      trigger: "change",
    },
  ],
  Limits: [
    {
      required: true,
      message: "是否拥有后台管理权限",
      trigger: "change",
    },
  ],
  // status: [
  //     {
  //         required: true,
  //         message: '请选择在职状态',
  //         trigger: 'change',
  //     },
  // ],
});
/* 添加员工 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    let roleInfo = JSON.parse(localStorage.getItem("roleInfo")!);
    if (valid) {
      if (ruleForm.value.Limits == false) {
        /* 需要登录的员工 */
        const formimgs = new FormData();
        formimgs.append("name", ruleForm.value.name);
        formimgs.append("phone", ruleForm.value.phone);
        formimgs.append("node", ruleForm.value.section);
        formimgs.append("station", [ruleForm.value.station]);
        formimgs.append("company", roleInfo.company);
        Requestemployeesave(formimgs).then((res: any) => {
          if (res.success == true) {
            ElMessage.success(res.msg);
            centerDialogVisible.value = false;
            getData();
          } else {
            ElMessage.error(res.msg);
          }
        });
      } else {
        const formimgs = new FormData();
        formimgs.append("name", ruleForm.value.name);
        formimgs.append("phone", ruleForm.value.phone);
        formimgs.append("node", ruleForm.value.section);
        formimgs.append("station", [ruleForm.value.station]);
        formimgs.append("company", roleInfo.company);
        RequestemployeeSaveEmployeeWithoutAccount(formimgs).then((res: any) => {
          if (res.success == true) {
            ElMessage.success(res.msg);
            centerDialogVisible.value = false;
            getData();
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  centerDialogVisible.value = false;
};

const formEmployee = ref<any>("");
/* 修改员工信息 */
const clearPositon = () => {
  formEmployee.value.sysStations = [];
};
const drawer = ref(false); //弹出层
const change = (row: any) => {
  RequestemployeeId(row.id).then((res: any) => {
    res.resultObj.create_time = formatTime(res.resultObj.create_time);
    formEmployee.value = res.resultObj;
    drawer.value = true;
  });
};

//  保存
const onSubmit = () => {
  flag.value = true;
  console.log("dasdasdsadasd", formEmployee.value);
  RequestemployeeUpdate(formEmployee.value).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      drawer.value = false;
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/* ******************************** 给单个员工---分配岗位 *********************************/
const allotPosiForm = ref<any>({});
const allotPositon = (row: any) => {
  allotPosiForm.value = row;
  allotPostionDialogVisible.value = true;
  getPostionList(row.id);
};
const allotPosiFormBtn = () => {
  const blob = new Blob(
    [
      JSON.stringify({
        id: allotPosiForm.value.id,
      }),
    ],
    {
      type: "application/json;charset=utf-8",
    }
  );
  const blob2 = new Blob([JSON.stringify(allotPosiForm.value.station)], {
    type: "application/json;charset=utf-8",
  });
  const AddRoleForm = new FormData();
  AddRoleForm.append("employee", blob);
  AddRoleForm.append("stations", blob2);
  RequesTemployeeEmployeeStationDispatch(AddRoleForm).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      allotPostionDialogVisible.value = false;
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main_nav {
    border-radius: 6px;
    background-color: #fff;
  }

  .main_content {
    background-color: #fff;
  }
}

.mask_icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #116cf8;
  border-radius: 0.5rem;
}

.mask_name {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: #3d3d3d;
}

.mask_id {
  font-size: 1rem;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  color: rgba(61, 61, 61, 0.5);
}

.mask_img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin-right: 1.25rem;
}

/* 表单label文字左对齐 */
:deep(.el-form-item__label) {
  padding-left: 1.25rem;
  justify-content: flex-start;
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8.75rem;
  right: 0;
  margin: auto 0;
}

.blue_b {
  width: 0.25rem;
  height: 1.375rem;
  margin-right: 0.375rem;
  background-color: #116cf8;
}

/* 弹出框样式 */

::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-select,
::v-deep .el-select-v2 {
  width: 100% !important;
}

::v-deep .el-select-v2__wrapper.is-disabled {
  background-color: #fff;
}

.disSelect_r {
  position: relative;

  .nenSelect {
    z-index: 100;
    opacity: 0;
  }

  .disSelect {
    position: absolute;
    top: 0;
    z-index: 99;
  }
}
</style>
